<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义事件</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 组件的使用 -->
        <test-component v-on:abc="test" :checked="clicked"></test-component>
        {{clicked}}
        <button @click="test2">点击</button>

        <hr>

        <testa-component></testa-component>
        <testb-component></testb-component>
    </div>


</body>
<!-- <script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    // 注册公共组件
    // 格式： Vue.component(组件名, 组件的配置)
    Vue.component('test-component', {
        model: {
            prop: 'checked',
            event: 'abc'
        },
        props: {
            checked: Boolean
        },

        // 通过$emit()方法定义事件，从而让子级组件中的元素触发父级的事件
        // template:是当前组件的模板
        template: `
        <div>
            <input
            type="checkbox"
            v-bind:checked="checked"
            v-on:change="$emit('abc', $event.target)"
            >
        </div>
        `
    })

    Vue.component('testa-component', {
        // model: {
        //     prop: 'checked',
        //     event: 'abc'
        // },
        props: {
            str:String
        },

        // 通过$emit()方法定义事件，从而让子级组件中的元素触发父级的事件
        // template:是当前组件的模板
        template: `
        <div>
            <p></p>
        </div>
        `
    })

    Vue.component('testb-component', {
        model: {
            
            event: 'sss'
        },
        props: {
            str:String
        },

        // 通过$emit()方法定义事件，从而让子级组件中的元素触发父级的事件
        // template:是当前组件的模板
        template: `
        <div>
            <input
            type="text"
         
            v-on:change="$emit('sss', $event.target)"
            >
        </div>
        `
    })

    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            clicked: false
        },
        // 使用生命周期
        beforeCreate: function () {
           
        },
        mounted: function () {
            console.log(this.$el)
        },

        // methods是当前应用定义的函数方法
        methods: {
            test: function (e) {
                console.log(e)
                console.log(e.checked)
                this.clicked = e.checked
            },
            test2: function (e) {
                console.log(e.target)
            }
        },
    })

    console.log(app.$el)

    /*
        Vue容器中有两个组件，一个组件显示字符串，另一个组件就进字符串的编辑。编辑中每个组件会显示编辑的内容。
    */

</script>

</html>